<template>
    <div class="detailContainer bg-gray">
      <el-card>
        <div slot="header" class="clearfix">
            <span>订单详情</span>
        </div>
       <!-- <div class="pt20"><strong class="showMouse fwbold" @click="gotioHome">首页</strong> > <strong class="showMouse fwbold" @click="$router.go(-1)">服务产品详情</strong> > 申请服务</div> -->
        <div class="bg-white info-card color-text mt20 pb30">
            <div class="head row-start-col-center">
              <div>订单状态</div>
            </div>
            <el-steps :active="orderStep" class="mg30 ml80 mr80" align-center>
              <el-step title="申请服务" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=1" src="@/assets/image/order/1_a.svg">
                  <img v-else src="@/assets/image/order/1.svg"> -->
                  <icon-font v-if="orderStep>=0" size="45" color="#436AF7"  class="icon-shenqingfuwu" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-shenqingfuwu" />
                </template>
              </el-step>
              <el-step title="服务商接单" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=2" src="@/assets/image/order/2_a.svg">
                  <img v-else src="@/assets/image/order/2.svg"> -->
                  <icon-font v-if="orderStep>=1" size="45" color="#436AF7"  class="icon-fuwushangjiedan" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-fuwushangjiedan" />
                </template>
              </el-step>
              <el-step title="签订合同" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=3" src="@/assets/image/order/3_a.svg">
                  <img v-else src="@/assets/image/order/3.svg"> -->
                  <icon-font v-if="orderStep>=2" size="45" color="#436AF7"  class="icon-qiandinghetong" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-qiandinghetong" />
                </template>
              </el-step>
              <el-step title="线上支付" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=4" src="@/assets/image/order/4_a.svg">
                  <img v-else src="@/assets/image/order/4.svg"> -->
                  <icon-font v-if="orderStep>=3" size="45" color="#436AF7"  class="icon-xianshangzhifu" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-xianshangzhifu" />
                </template>
              </el-step>
              <el-step title="完成服务" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=5" src="@/assets/image/order/5_a.svg">
                  <img v-else src="@/assets/image/order/5.svg"> -->
                  <icon-font v-if="orderStep>=4" size="45" color="#436AF7"  class="icon-wanchengfuwu" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-wanchengfuwu" />
                </template>
              </el-step>
              <el-step title="评价服务" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=6" src="@/assets/image/order/6_a.svg">
                  <img v-else src="@/assets/image/order/6.svg"> -->
                  <icon-font v-if="orderStep>=5" size="45" color="#436AF7"  class="icon-fuwupingjia" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-fuwupingjia" />
                </template>
              </el-step>
            </el-steps>
        </div>
         <!-- <div class="bg-white info-card color-text mt20 pb30">
            <div class="head row-start-col-center">
              <div>申请服务信息</div>
            </div>
            <div class="fs16 fwbold ml30 "><i class="el-icon-location fs-xl mr5 color-red">企业名称</i></div>
        </div> -->
         <div class="bg-white info-card color-text mt20 pb30">
            <div class="head row-start-col-center">
              <div>确认订单信息</div>
            </div>
            <div class="container pl20 pr20 relposition">
                <div v-if="product?.pricingType !== 2" class="row-spaceb-col-center pt10 absposition" style="right: 20px; top: 60px;">
                  <span>数量：</span>
                  <el-input-number
                    v-model="productCount"
                    :min="1"
                    :precision="0"
                    size="small"
                    @change="handleCountChange"
                  ></el-input-number>
                </div>
                <div class="pl10 pr30 pt30">
                    <div class="fwbold fs18"><img src="@/assets/image/company_icon.png" alt="" style="width:20px;height:22px;margin-right:10px">{{product?.serviceInfo?.companyName}}</div>
                    <div class="row-spaceb width-24">
                        <div class="row-start mt20">
                          <!-- <img src="@/assets/image/comlogo.png" style="width: 108px;height: 95px;" alt="产品图片"> -->
                          <img :src="`/api/public/file/v1/public/get/${product?.productImg}`" style="width: 108px;height: 95px;" alt="" @error="setDefaultImage">
                          <div class="fs14">
                              <div class="fwbold mb10 ml10 fs16">{{product?.productName}}</div>
                              <div class="color-gray66 mb5 ml10">联系电话:<span class="color-primary"> {{product?.contactPhoneNum}}({{product?.contactPerson}})</span></div>
                              <div class="color-gray66 mb5 ml10">服务商地址: {{product?.serviceInfo?.companyAddress}}</div>
                              <div class="color-gray66 mb5 ml10">工作时间: {{ workDate(product?.serviceInfo?.workDate) }} {{product?.serviceInfo?.workBeginTime}} ~ {{product?.serviceInfo?.workEndTime}}</div>
                              <!-- <div class="color-gray66 mb5 ml10">产品价格: {{$priceFormat(product?.limitPrice,product?.upperPrice)}}元</div> -->
                          </div>
                        </div>
                         
                    </div>
                </div>
                <div v-if="product?.productTypeId == '33ac82ab-3ab4-46ce-bfd7-105fc62c4eac'">
                  <el-divider></el-divider>
                   <div class="row-start-col-center">
                      <el-switch
                        v-model="showAdditionalInfo"
                        class="ml10"
                        active-text="展开填写"
                        inactive-text="收起不填">
                      </el-switch>
                      <div class="fs14 fwbold ml10">订单附加信息</div>
                   </div>
                      <!-- 附加信息表单 -->
                      <div v-if="showAdditionalInfo" class="pl20 pr20 pt20">
                        <el-form ref="additionalForm" :model="additionalForm" label-width="220px" :rules="additionalFormRules">
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <el-form-item label="数字化研发设计工具是否普及" prop="isDigitalRdToolSpread" required>
                                <el-radio-group v-model="additionalForm.isDigitalRdToolSpread" size="small">
                                  <el-radio :label="1">是</el-radio>
                                  <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item label="关联工具数控化率" prop="keyProcessCncRate" required>
                                <el-input-number
                                  v-model="additionalForm.keyProcessCncRate" 
                                  :min="0"
                                  :max="100"
                                  :precision="2"
                                  size="small"
                                  controls-position="right">
                                </el-input-number>
                                <span class="ml10">%</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <el-form-item label="数字化生成联网率" prop="digitalProductionEquipmentNetworkingRate" required>
                                <el-input-number
                                  v-model="additionalForm.digitalProductionEquipmentNetworkingRate"
                                  :min="0" 
                                  :max="100"
                                  :precision="2"
                                  size="small"
                                  controls-position="right">
                                </el-input-number>
                                <span class="ml10">%</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item label="是否实现产业链协同" prop="digitalRdToolSpreadRate" required>
                                <el-radio-group v-model="additionalForm.digitalRdToolSpreadRate" size="small">
                                  <el-radio :label="1">是</el-radio>
                                  <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <el-form-item label="服务产生直接经济效益" prop="directEconomicBenefits" required>
                                <el-input-number
                                  v-model="additionalForm.directEconomicBenefits"
                                  :min="0"
                                  :precision="2"
                                  size="small"
                                  controls-position="right">
                                </el-input-number>
                                <span class="ml10">万元</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item label="服务产生间接经济效益" prop="indirectEconomicBenefits" required>
                                <el-input-number
                                  v-model="additionalForm.indirectEconomicBenefits"
                                  :min="0"
                                  :precision="2"
                                  size="small"
                                  controls-position="right">
                                </el-input-number>
                                <span class="ml10">万元</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </div>
                </div>
            </div>
        </div>
        <!-- 服务券的选择和金额展示 -->
        <div class="bg-white info-card color-text mt20 pb30">
            <div class="head row-start-col-center">
              <div>优惠券抵用</div>
            </div>
              <div class="row-spaceb ml30">
                <div class="coupon-display mt20">
                  <el-checkbox-group v-model="selectedCoupon">
                    <div v-for="(item,index) in voucherList" :key="index" class="mt10">
                      <div v-if="item.validStatus">
                        <el-checkbox :disabled="!item.validStatus" :label="item.voucherId" :value="item.validStatus" @change="selectQuan(item)">领券下单</el-checkbox>
                           <!-- :class="[product.parentProductTypeId == 1 ? 'quancard' : 'quancard1', 'mt10 pd10 pt20 fs16']" -->
                        <div :class="[item.voucherTypeId == '1717575751449443' ? 'quancard' : 'quancard1', 'mt10 pd10 pt10 fs16']">
                            <div class="color-black fs16">{{item.voucherTypeName}}：
                              <template v-if="item.voucherTypeName?.includes('融资担保')">
                                <span class="fs20 color-red fwbold">最高补贴50%</span>
                              </template>
                              <template v-else-if="item.voucherTypeName.includes('设备')">
                                <span class="fs20 color-red fwbold">LPR的20%</span>
                              </template>
                              <template v-else>
                                <span v-if="selectedCoupon[0] === item.voucherId" class="fs20 color-red fwbold">{{$priceToThousands(selectedQuan?.upperDiscountPrice)}} 元</span>
                                <span v-else class="fs20 color-red fwbold">{{$priceToThousands(item.discountPrice)}} 元</span>
                              </template>
                            </div>
                            <div class="pt5 color-grey fs14" v-if="item.voucherTypeName?.includes('融资担保')">
                                每家企业每年可使用服务券额度最高不超100万元
                            </div>
                            <div class="pt5 color-grey fs14" v-if="item.voucherTypeName?.includes('设备租赁')">
                                每家企业每年可使用服务券额度最高不超50万元
                            </div>
                            <div class="pt5 color-grey fs14">券的有效期：<span class="fs14 color-red">
                              {{moment(item.validBeginTime).format('YYYY年MM月DD日')}} ~ {{moment(item.validEndTime).format('YYYY年MM月DD日')}}
                              </span>
                            </div>
                            <div v-if="!item.validStatus" class="fs12 color-grey pt5">不可领券：{{item.invalidReason}} </div>
                        </div>
                      </div>
                    </div>
                  </el-checkbox-group>
                </div>
                <div class="mr50 color-gray66 mt60 width-5">
                  <div class="service-amount row-spaceb pt10">
                    <span>服务金额：</span>
                    <span v-if="product?.productTypeName?.includes('融资担保') || product?.productTypeName?.includes('设备租赁')" class="color-red fwbold">面议</span>
                    <span v-else class="fwbold">{{$priceFormat(product?.limitOriginalPrice,product?.upperOriginalPrice)}} 元</span>
                  </div>
                  <div class="coupon-deduction row-spaceb pt10">
                    <span>服务券抵扣金额：</span>
                    <span v-if="product?.productTypeName?.includes('融资担保')" class="color-red fwbold">最高50%</span>
                    <span v-else-if="product?.productTypeName?.includes('设备租赁')" class="color-red fwbold">最高LPR*20%</span>
                    <span v-else class="color-red fwbold">{{ $priceFormat(selectedQuan?.limitDiscountPrice,selectedQuan?.upperDiscountPrice)}} 元</span>
                  </div>
                  <div class="coupon-balance row-spaceb pt10" v-if="selectedQuan?.voucherBalance"><span>服务券额度剩余：</span><span class="color-red fwbold">{{ $priceToThousands(selectedQuan?.voucherBalance) }}</span> 元</div>
                </div>
              </div>
        </div>
        <div class="row-spaceb">
            <div class="pt10 pl10 color-primary">
              <i class="el-icon-warning-outline color-red"></i> 温馨提示∶提交订单后，待服务商接单，双方商谈一致后签订合同，使用网页版完成对公支付，再提供服务。
            </div>
            <div class="tr mr40">
              <div class="mg5" v-if="product?.productTypeName?.includes('融资担保') || product?.productTypeName?.includes('设备租赁')">
                <span>实付金额：</span><span class="pay-money color-red fs24">面议</span>
              </div>
              <div v-else>
                    <div class="mg5" v-if="selectedQuan"><span>实付金额：</span><span class="pay-money color-red fs24">{{ $priceFormat(this.selectedQuan?.limitPrice,this.selectedQuan?.upperPrice) }}</span> 元</div>
                    <div class="mg5" v-else><span>实付金额：</span><span class="pay-money color-red fs24">{{$priceFormat(this.product?.limitOriginalPrice,this.product?.upperOriginalPrice)}}</span> 元</div>
                    <div class="mg5"><span>实付大写金额(人民币) ：</span><span class="fs18 color-red">{{selectedQuan ? chineseMoneyQuan : chineseMoney}}</span></div>
              </div>
            </div>
        </div>

          <!-- 第三部分：返回和提交按钮 -->
          <div class="row-center mr30 mt30">
            <el-button class="button1" @click="goBack">返回到商品详情</el-button>
            <el-button class="button2" type="primary" :loading="applyLoading" @click="submitOrder">提交订单</el-button>
          </div>

        <el-dialog title="添加服务地址" :visible.sync="showDialog" width="780px">
              <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="所在地区">
                  <el-select v-model="form.region" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="详细地址">
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="申请人">
                  <el-input v-model="form.applicant"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="addAddress">确 定</el-button>
              </span>
        </el-dialog>
      </el-card>
        <el-dialog title="服务商入驻申请" :visible.sync="tipVisible" width="525px" custom-class="my-dialog">
          <p style="margin-top: -10px;">需要完成<span
              style="color: #436AF7;">"支付信息认证"</span>才可进行"申请入驻"的操作，请先完成认证。</p>
          <div style="text-align: right;margin-top: 40px;">
            <el-button type="info" size="medium" @click="tipVisible = false">暂不认证</el-button>
            <el-button type="primary" size="medium" class="blue-btn"
              @click="() => { tipVisible = false; this.$router.push({name: '个人中心'}) }">前往认证</el-button>
          </div>
        </el-dialog>
        <el-dialog title="请前往小程序制作签章" :visible.sync="signVisible" width="525px" custom-class="my-dialog">
             <div class="row-spaceb pt20 pl50 pr50">
                <div>
                    <div style="width: 43px;height: 5px;background: #436AF7;"></div>
                    <div class="mt20">需要使用微信扫码</div>
                    <div class="mt10"> 登录 <span class="color-primary">广西桂在益企小程序</span></div>
                    <div class="mt10">在个人中心页完成 <strong class="color-primary">制作签章 ！</strong></div>
                    <div class="mt10">制作签章完成后请刷新当前页面</div>
                </div>
             <div>
               <img src="@/assets/image/miniCode.jpg" class="ml30"  alt="face" style="width: 149px;height: 149px;" />
             </div>
          </div>
          <div style="text-align: right;margin-top: 40px;">
            <el-button type="info" size="medium" @click="signVisible = false">确认</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import TimeLine from "@/components/timeLine.vue";
import {voucherPage,applyService,getProductDetail,productPrice,fen2uppercase,getSignStatus} from '@/api/homeApi'
import moment from 'moment'
import { workDate } from '@/utils/index'
export default {
    name: 'ProductDetail',
    // Add your component logic here
    data() {
        return {
          moment,
          workDate,
          radio: '1',
          activeName1: 'first',
          activeName2: 'second',
          activeName3: 'third',
          activities: [
            // 申请服务、服务商接单、签订合同、线上支付、完成服务、评价服务
            {
              content: '申请服务',
              timestamp: '2024-10-10 10:00:00',
              icon: 'el-icon-more',
            },
            {
              content: '服务商接单',
              timestamp: '2024-10-10 10:00:00',
              icon: 'el-icon-more',
            },
            {
              content: '签订合同',
              timestamp: '2024-10-10 10:00:00',
              icon: 'el-icon-more',
            },
            {
              content: '线上支付',
              timestamp: '2024-10-10 10:00:00',
              icon: 'el-icon-more',
            },
            {
              content: '完成服务',
              timestamp: '2024-10-10 10:00:00',
              icon: 'el-icon-more',
            },
            {
              content: '评价服务',
              timestamp: '2024-10-10 10:00:00',
              icon: 'el-icon-more',
            },
          ],
          couponCount: 1,
          selectedCoupon: [],
          serviceAmount: 0,
          couponDeduction: 0,
          couponBalance: 0,
          actualPrice: 0,
          orderStep: 0,
          showDialog: false,
          form: {
            region: '',
            address: '',
            applicant: '',
            phone: ''
          },
          productId: '',
          voucherList: [],
          applyLoading: false,
          product: {},
          selectedQuan: null,
          chineseMoney:'',
          chineseMoneyQuan:'',
          tipVisible: false,
          signVisible: false,
          companySealOk: false,
          legalSealOk: false,
          productCount: 1,
          showAdditionalInfo: false,
          additionalForm: {
            isDigitalRdToolSpread: null,
            keyProcessCncRate: 0,
            digitalProductionEquipmentNetworkingRate: 0, 
            digitalRdToolSpreadRate: null,
            directEconomicBenefits: 0,
            indirectEconomicBenefits: 0
          },
          additionalFormRules: {
            isDigitalRdToolSpread: [
              { required: true, message: '请选择是否普及数字化研发设计工具', trigger: 'change' },
            ],
            keyProcessCncRate: [
              { required: true, message: '请输入关联工具数控化率', trigger: 'change' },
            ],
            digitalProductionEquipmentNetworkingRate: [
              { required: true, message: '请输入数字化生成联网率', trigger: 'change' },
            ],
            digitalRdToolSpreadRate: [
              { required: true, message: '请选择是否实现产业链协同', trigger: 'change' },
            ],
            directEconomicBenefits: [
              { required: true, message: '请输入服务产生直接经济效益', trigger: 'change' },
            ],
            indirectEconomicBenefits: [
              { required: true, message: '请输入服务产生间接经济效益', trigger: 'change' },
            ],
          }
        }
    },
    components: {
        TimeLine
    },
    mounted() {
       this.productId = this.$route.query?.id;
        if(this.productId){
            this.getProductDetail(this.productId)
            this.getvoucherPage()
        }
        getSignStatus().then(res=>{
            if(res.code === 200){
            this.companySealOk = res.data.companySealOk,
            this.legalSealOk = res.data.legalSealOk
            }
        })
    },
    methods: {
        setDefaultImage(event) {
            event.target.src = require('@/assets/image/error.jpg');
        },
        selectQuan(item){
           if (this.selectedCoupon.includes(item.voucherId)) {
              productPrice({productId:this.productId,voucherId:item.voucherId}).then(res=> {
                if(res.code === 200 && res.data.voucherUsable === true){
                  this.selectedCoupon = [item.voucherId]
                  this.selectedQuan = res.data
                  fen2uppercase({fee:this.selectedQuan.limitPrice}).then(res=>{
                    if(res.code === 200){
                      this.chineseMoneyQuan = res.data
                    }
                  })
                }else{
                  this.$message.error('这张券不能使用')
                  this.selectedCoupon = []
                  this.selectedQuan = null
                }
              })
          } else {
              this.selectedCoupon = []
              this.selectedQuan = null
          }
        },
        getProductDetail(productId){
            getProductDetail({productId}).then(res => {
                if(res.code == 200){
                    this.product = res.data
                    this.product.productImg = res.data?.productImg.includes('|') ? res.data?.productImg.split('|')[0] : res.data?.productImg;
                    if(this.product.limitOriginalPrice > 0){
                       fen2uppercase({fee:this.product.limitOriginalPrice}).then(res=>{
                          if(res.code === 200){
                            this.chineseMoney = res.data
                          }
                       })
                    }
                }
            })
        },
        goBack() {
            this.$router.push({path:'/productDetail',query:{id:this.productId}})
        },
        getvoucherPage(){
          voucherPage({pageNo:1,pageNum:20,isAudit:1,productId:this.productId}).then(res=>{
            if(res.code === 200){
              this.voucherList = res.rows
                // 检查是否所有优惠券都是无效的
                const allInvalid = this.voucherList.every(item => !item.validStatus);
                if (allInvalid) {
                  this.$message.error('暂无可抵用优惠券额度');
                  return;
                }
              this.voucherList.forEach(item => {
                    // Check if the voucher's validStatus is true
                    if (item.validStatus) {
                      // Call productPrice for the current item
                      productPrice({ productId: this.productId, voucherId: item.voucherId }).then(res => {
                        // Check if the response is successful and the voucher is usable
                        if (res.code === 200 && res.data.voucherUsable === true) {
                          this.selectedCoupon = [item.voucherId];
                          this.selectedQuan = res.data;
                          fen2uppercase({fee:this.selectedQuan.limitPrice}).then(res=>{
                            if(res.code === 200){
                              this.chineseMoneyQuan = res.data
                            }
                          })
                        }else{
                          this.$message.error('这张券不能使用')
                          this.selectedCoupon = []
                          this.selectedQuan = null
                        }
                      });
                    }
              });
            }
          })
        },
        handleCountChange(value) {
              // Call your price calculation API here
              productPrice({
                productId: this.productId,
                voucherId: this.selectedCoupon.length > 0 ? this.selectedCoupon[0] : null,
                quantity: value
              }).then(res => {
                if(res.code === 200) {
                  this.selectedQuan = res.data;
                  this.product.limitOriginalPrice = this.selectedQuan.limitOriginalPrice
                  this.product.upperOriginalPrice = this.selectedQuan.upperOriginalPrice
                  if(this.selectedQuan?.limitPrice) {
                    fen2uppercase({fee: this.selectedQuan.limitPrice}).then(res => {
                      if(res.code === 200) {
                        this.chineseMoneyQuan = res.data;
                      }
                    });
                  }
                }
              });
      },
        submitOrder() {
            // if(!this.companySealOk || !this.legalSealOk){
            //   this.signVisible = true
            //   return
            // }
            this.$confirm('确定要提交订单吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                  // 在这里添加提交订单的逻辑
                  this.applyLoading = true
                  let voucherId = this.selectedCoupon.length > 0 ? this.selectedCoupon[0] : null
                  let additionalInfo = this.showAdditionalInfo ? this.additionalForm : null
                  applyService({productId:this.productId,voucherId:voucherId,quantity:this.productCount,additionalInfo:additionalInfo}).then(res=>{
                    if(res.code === 200){
                      this.$message.success('提交订单成功')
                      // 路由跳转至/couponOrder
                      this.$router.push({path:'/personalCenter/couponOrder',query:{orderId:res.data.orderId,status:res.data.status}})
                    }else if(res.code == 100001){
                       this.tipVisible = true
                    }else{
                      // 提交订单失败提示
                       this.$message.error(res.msg)
                    }
                  }).finally(()=>{
                    this.applyLoading = false
                  })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消提交'
              });          
            });
        },
        gotioHome() {
            this.$router.push('/index')
        },
        addAddress(){
           this.showDialog = true;
            // this.$router.push('/addAddress')
        },
        editAddress(label) {
        // 在这里添加编辑地址的逻辑
        },
        deleteAddress(label) {
          // 在这里添加删除地址的逻辑
        },
    }
}
</script>

<style scoped>
.selected {
  border: 1px solid #D32521;
  width: 300px;
}
.not-selected {
  border: 1px solid #ccc;
  width: 300px;
}
/* Add your component styles here */
.detailContainer{
    margin: 0 auto;
    padding: 20px 15%;
}
.pay-money{
  width: 180px;
  font-weight: 600;
}
.button1{
  width: 180px;
  height: 50px;
  background: #FFFFFF;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #436AF7;
  color: #436AF7;
  font-size: 18px;
  margin-right:40px;
}
.button2{
  width: 262px;
  height: 50px;
  background: #436AF7;
  border-radius: 5px 5px 5px 5px;
  font-size: 18px;
  border: 1px solid #436AF7;
  }
.info-card{
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
}
.head{
      padding: 10px 20px;
      min-height: 40px;
      font-size: 14px;
      background: #F7F8F9;
}
.quancard{
    width: 450px;
    height: 90px;
    background-image: url('@/assets/image/smallCoupon.png');
    background-size: 100% 100%;
    padding-left: 20%;
}
.quancard1{
    width: 450px;
    height: 90px;
    background-image: url('@/assets/image/smallCoupon1.png');
    background-size: 100% 100%;
    padding-left: 20%;
}
/deep/.el-radio.is-checked .el-radio__inner {
  border-color: #D32521;
  background-color: #D32521;
  color: #D32521;
}
/deep/ .el-radio.is-checked .el-radio__label {
  color: #D32521;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #D32521;
  color: white;
}

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
  color: white;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  transition: none;
}
</style>